import { onMounted, ref, onUnmounted } from 'vue'
export function useContextMenu(container) {
  const x = ref(0)
  const y = ref(0)
  const visible = ref(false)
  const openMenu = (e) => {
    e.preventDefault()
    e.stopPropagation()
    x.value = e.clientX
    y.value = e.clientY
    visible.value = true
  }
  function closeMenu() {
    visible.value = false
  }
  onMounted(() => {
    container.value.addEventListener('contextmenu', openMenu)
    window.addEventListener('click', closeMenu)
    window.addEventListener('contextmenu', closeMenu)
  })
  onUnmounted(() => {
    container.value.removeEventListener('contextmenu', openMenu)
    window.removeEventListener('click', closeMenu)
    window.removeEventListener('contextmenu', closeMenu)
  })
  return {
    x,
    y,
    visible,
  }
}
